<template>
  <div id="app">
    <transition mode="out-in" :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: "turn-on",
    };
  },
  watch: {
    $route: function (to, from) {
      if (parseInt(to.query._t) < parseInt(from.query._t)) {
        this.transitionName = "turn-off";
      } else {
        this.transitionName = "turn-on";
      }
    },
  },
};
</script>


<style lang="scss" scoped>
@keyframes turnon-enter {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes turnon-leave {
  from {
    opacity: 1;
    transform: translateY(0%);
  }
  to {
    opacity: 0;
    transform: translateY(10%);
  }
}

@keyframes turnoff-enter {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes turnoff-leave {
  from {
    opacity: 1;
    transform: translateY(0%);
  }
  to {
    opacity: 0;
    transform: translateY(10%);
  }
}

.turn-on-enter-active {
  animation: turnon-enter 0.4s;
}
.turn-on-leave-active {
  animation: turnon-leave 0.4s;
}

.turn-off-enter-active {
  animation: turnoff-enter 0.4s;
}
.turn-off-leave-active {
  animation: turnoff-leave 0.4s;
}
</style>